<!doctype html>
<html lang="zh" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="initial-scale=1.1,user-scalable=no">
  <title>预约</title>  
  
   <link rel="stylesheet" href="/static/weixin/css/app.css">
  <script src="/static/weixin/js/config.js"></script>

  <link rel="stylesheet" href="/static/weixin/css/mobilescroll.css">

  <script src="/static/weixin/js/zarpemain.js"></script>

  <script src="/static/weixin/js/lib/mobiscroll.js"></script>

</head>
<body ng-controller="SchedularController" ng-cloak class="ng-cloak">

  <!-- schedular page -->
  <ons-navigator var="schedularNav" title="预约" id="schedularNav">
    <ons-page class="form_page" id="basicinfo.html">
      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item modifier="chevron" ng-click="schedularNav.pushPage('selectcars.html')"> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-model-s"></ons-icon> 车型
            </ons-col>
            <ons-col class="form-content">{{ selectedVehicle.fullName }}</ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-model-s"></ons-icon> 车牌
            </ons-col>
            <ons-col class="form-content non-editable">{{ selectedVehicle.license_plate }}</ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-speedometer"></ons-icon> 公里数
            </ons-col>
            <ons-col class="form-content">
              <input type="number" placeholder="当前公里数" class="text-input text-input--transparent" ng-model="info.mileage"/>
            </ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-person"></ons-icon> 联系人
            </ons-col>
            <ons-col class="form-content non-editable">
              <input type="text" placeholder="联系人姓名" class="text-input text-input--transparent" ng-model="info.visitor_name"/>
            </ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-ios7-telephone"></ons-icon> 联系电话
            </ons-col>
            <ons-col class="form-content non-editable">
              <input type="tel" placeholder="联系电话" class="text-input text-input--transparent" ng-model="info.visitor_phone"/>
            </ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item> 
          <ons-row>
            <ons-col width="100px" class="form-label">
              <ons-icon icon="ion-ios7-email"></ons-icon> 联系邮箱
            </ons-col>
            <ons-col class="form-content non-editable">
              <input type="text" placeholder="联系邮箱" class="text-input text-input--transparent" ng-model="info.visitor_email" />
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>

       <div class="fixed-bottom" id="shoppingCart" ng-click="showCartItems('#shoppingCart')"><ons-icon icon="fa-shopping-cart" class="fixed-bottom-icon"><span ng-class="{notification:shoppingCart.size,disappear:!shoppingCart.size}">{{ shoppingCart.size }}</span></div>

      <div class="bottom-bar" style="text-align: center">
        <div class="left navigation-bar__left"></div>
        <div class="center navigation-bar__title navigation-bar__center">车辆信息</div>
        <div class="right navigation-bar__right">
          <ons-toolbar-button ng-click="goToPage('selectplans.html')">
            下一步 <ons-icon icon="ion-ios7-arrow-forward" class="forward-button-icon">
          </ons-toolbar-button>
        </div>
      </div>

      <ons-modal var="main.modal">
        <ons-icon icon="gear" spin="true" style="line-height: 20px; vertical-align: middle;" ></ons-icon>
        <span style="line-height: 20px; font-size: 15px;">获取数据中。。。</span>
      </ons-modal>
    </ons-page>
    
  </ons-navigator>

  <ons-template id="selectplans.html">
    <ons-page ng-controller="SelectPlansController">
      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-header>推荐养护计划</ons-list-header>
        <ons-list-item modifier="chevron">
          <select id="plan_select" ng-model="selectedServicePoint" style="width:100%" placeholder="选择保养里程点" style="margin-top:8px; width: 100%;"> 
            <option ng-repeat="ptn in servicePoints" ng-selected="isPlanRecommended(ptn)" ng-value="$index">{{ptn.mileageWithUnit}}</option>
          </select>
          <input id="plan_select_dummyinput" type="text" placeholder="选择保养里程点" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" >
        </ons-list-item>
      </ons-list>

      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-header>计划内项目</ons-list-header>
        <ons-list-item ng-repeat="service in selectedServicePoint.services" ng-class="{'list__item--chevron':service.isMenu}" ng-click="showMenuItems(service)">
          <ons-row>
            <ons-col width="76%">{{service.name}}</ons-col>
            <ons-col style="text-align:center">{{service.isOptionText}}</ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>

      <div style="padding: 10px 9px 0 9px; margin-top: 30px">
        <ons-button modifier="large" style="margin: 0 auto;" ng-click="togglePlanPurchase()" ng-attr-disabled="{{ !planSelected }}">
          {{ buttonContent }}   <span ng-class="{disappear:!isPlanInCart}"><ons-icon icon="fa-check" fixed-width="false" style="color: #c4c4c4" size="30px"></ons-icon></span>
        </ons-button>
      </div>

      <div class="fixed-bottom" id="shoppingCart1" ng-click="showCartItems('#shoppingCart1')"><ons-icon icon="fa-shopping-cart" class="fixed-bottom-icon"><span ng-class="{notification:shoppingCart.size,disappear:!shoppingCart.size}">{{ shoppingCart.size }}</span></div>

      <div class="bottom-bar" style="text-align: center">
        <div class="left navigation-bar__left"><ons-back-button>车辆信息</ons-back-button></div>
        <div class="center navigation-bar__title navigation-bar__center">养护计划</div>
        <div class="right navigation-bar__right">
          <ons-toolbar-button ng-click="schedularNav.pushPage('selectservices.html')">
            下一步 <ons-icon icon="ion-ios7-arrow-forward" class="forward-button-icon">
          </ons-toolbar-button>
        </div>
      </div>

      <ons-modal var="main.modal">
        <ons-icon icon="gear" spin="true" style="line-height: 20px; vertical-align: middle;" ></ons-icon>
        <span style="line-height: 20px; font-size: 15px;">获取数据中。。。</span>
      </ons-modal>
    </ons-page>
  </ons-template>

  <!-- a popup that shows items within the shopping cart -->
  <ons-template id="cartItems.html">
    <ons-popover cancelable ng-controller="CartItemsController">
      <ons-list>
        <ons-list-item ng-repeat="item in cartItems">
          <ons-icon icon="fa-times" ng-click="removeFromCart(item)" style="color:red; width:20px; height:20px"></ons-icon>  {{item.name}} 
        </ons-list-item>
      </ons-list>
    </ons-popover>
  </ons-template>


  <!-- the dialog that shows the items within a menu -->
  <ons-template id="menuItems.html" >
    <ons-dialog var="dialog" cancelable ng-controller="MenuItemsDialogController">
      {{service.menuItemsStr}}
    </ons-dialog> 
  </ons-template>


  <!-- select maintenance, repair and menu services page. called selectservices.html -->
  <ons-template id="selectservices.html">
    <ons-page ng-controller="SelectServicesController">
      <ons-tabbar position="top">
        <ons-tab page="maintenanceServices.html" active="true">养护类</ons-tab>
        <ons-tab page="repairServices.html" >维修类</ons-tab>
        <ons-tab page="menuServices.html" >套餐类</ons-tab>
      </ons-tabbar>

      <div class="fixed-bottom" id="shoppingCart2" ng-click="showCartItems('#shoppingCart2')"><ons-icon icon="fa-shopping-cart" class="fixed-bottom-icon"><span ng-class="{notification:shoppingCart.size,disappear:!shoppingCart.size}">{{shoppingCart.size}}</span></div>
      
      <div class="bottom-bar" style="text-align: center">
        <div class="left navigation-bar__left"><ons-back-button>养护计划</ons-back-button></div>
        <div class="center navigation-bar__title navigation-bar__center">服务信息</div>
        <div class="right navigation-bar__right">
          <ons-toolbar-button ng-click="schedularNav.pushPage('select_time_slots.html')">
            下一步 <ons-icon icon="ion-ios7-arrow-forward" class="forward-button-icon">
          </ons-toolbar-button>
        </div>
      </div>
    </ons-page>
  </ons-template>

  <ons-template id="maintenanceServices.html">
    <ons-page ng-controller="MaintenanceServiceItemsController">
      <ons-list>
        <ons-list-item ng-repeat="si in maintenance_service_items" modifier="tappable">
          <label class="checkbox checkbox--noborder checkbox--list-item" >
            <input type="checkbox" name="b" ng-checked="cartHasItem(si)" ng-click="toggleServiceItem(si)" >
            <div class="checkbox__checkmark checkbox--noborder checkbox--list-item__checkmark"></div>
            {{si.name}}
          </label>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="repairServices.html">
    <ons-page ng-controller="RepairServiceItemsController">
      <ons-list>
        <ons-list-item ng-repeat="si in repair_service_items" modifier="tappable">
          <label class="checkbox checkbox--noborder checkbox--list-item" >
            <input type="checkbox" name="b" ng-checked="cartHasItem(si)" ng-click="toggleServiceItem(si)" >
            <div class="checkbox__checkmark checkbox--noborder checkbox--list-item__checkmark"></div>
            {{si.name}}
          </label>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="menuServices.html">
    <ons-page ng-controller="MenuServiceItemsController">
      <ons-list>
        <ons-list-item ng-repeat="si in menu_service_items" modifier="chevron">
          <label class="checkbox checkbox--noborder checkbox--list-item" >
            <input type="checkbox" name="b" ng-checked="cartHasItem(si)" ng-click="toggleServiceItem(si)" >
            <div class="checkbox__checkmark checkbox--noborder checkbox--list-item__checkmark"></div>
            {{si.name}}
          </label>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="selectcars.html">
    <ons-page ng-controller="MyCarsController">
      <ons-toolbar>
        <div class="left"><ons-back-button>返回</ons-back-button></div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item ng-repeat="v in vehicles" modifier="tappable">
          <label class="radio-button radio-button--list-item" >
            <img ng-src="{{v.vehicle_model_year.image}}" alt="vehicle_image" width="100" height="50" style="float:right"/>
            <input type="radio" name="b" ng-checked="v.id == selectedV.id"  ng-click="selectVehicle(v, $event)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{ v.license_plate }}
          </label> 
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>


  <!-- select time slot page -->
  <ons-template id="select_time_slots.html">
    <ons-page ng-controller="SelectScheduleDateController">
      <div class="list-header">选择日期</div>
      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-item modifier="chevron">
          <ons-row>
            <input type="text" id="schedule_date_picker" class="text-input text-input--transparent" placeholder="点击选择预约日期" style="width:100%"/>
          </ons-row>
        </ons-list-item>
      </ons-list>

      <div class="list-header">选择时间段 (总用时{{total_duration}})</div>
      <ons-list modifier="inset" style="margin-top:10px" >
        <ons-list-item modifier="chevron">
          <select id="timeslot_select" ng-model="selectedTimeSlot" style="width:100%" placeholder="选择预约时间段" style="margin-top:8px; width: 100%;">
            <option ng-repeat="ts in time_slots" ng-disabled="{{!isTimeAvailable(ts, total_duration)}}" ng-value="ts.start_time">{{ts.displayedTime}}</option>
          </select>
          <input id="timeslot_select_dummyinput" type="text" placeholder="选择预约时间段" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" >
        </ons-list-item>
      </ons-list>

      <div class="list-header">预计完成时间</div>
      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-item>
          {{ estimated_complete_time_formatted }}
        </ons-list-item>
      </ons-list>

      <div class="list-header">选择交通方式</div>
      <ons-list modifier="inset" style="margin-top:10px">
        <ons-list-item modifier="tappable" ng-repeat="trans in transportations">
          <label class="radio-button radio-button--list-item">
            <input type="radio" ng-model="transportation.type" ng-value="trans.type" ng-change="changeTransportation(trans.type)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{trans.name}}
          </label>
        </ons-list-item>
      </ons-list>

      <div class="fixed-bottom" id="shoppingCart3" ng-click="showCartItems('#shoppingCart3')"><ons-icon icon="fa-shopping-cart" class="fixed-bottom-icon"><span ng-class="{notification:shoppingCart.size,disappear:!shoppingCart.size}">{{shoppingCart.size}}</span></div>
      
      <div class="bottom-bar" style="text-align: center">
        <div class="left navigation-bar__left"><ons-back-button>服务信息</ons-back-button></div>
        <div class="center navigation-bar__title navigation-bar__center">选时段</div>
        <div class="right navigation-bar__right">
          <ons-toolbar-button ng-click="prepareApptForSubmit()">
            提交 <ons-icon icon="ion-ios7-checkmark" style="color:red" class="forward-button-icon">
          </ons-toolbar-button>
        </div>
      </div>
    </ons-page>
    </ons-page>
  </ons-template>

  <ons-template id="time_slots.html">
    <ons-dialog animation="default" cancelable ng-controller="TimeSlotsController">
        <ons-list style="overflow:scroll">
        <ons-list-item ><div style="margin:2px"ng-repeat="ts in time_slots" class="timeslot-container">
          <ons-icon icon="ion-pricetags" ng-show="ts.marketing_schemas.length > 0" class="pricetag"></ons-icon>
          <ons-button modifier="large" style="margin: 0 auto;" ng-attr-disabled="{{!isTimeAvailable(ts, total_duration)}}" ng-click="selectSlot(ts)">
            {{ts.displayedTime}} <ons-icon icon="ion-checkmark" ng-class="{disappear:ts!=selectedSlot}"></ons-icon>
          </ons-button>
        </div></ons-list-item>
        </ons-list>
    </ons-dialog>
  </ons-template>

  <ons-template id="issue_description.html">
    <ons-dialog ng-controller="IssueDescriptionController" var="issueDescDialog" cancelable>
      <ons-toolbar inline>
        <div class="center">
          不知道选择什么？
        </div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item>
          <textarea class="textarea textarea--transparent" placeholder="告诉我们发生了什么情况" ng-model="issue.description" style="width: 100%; height: 100px;"></textarea>
        </ons-list-item>
        <ons-list-item>
          <ons-button modifier="large" style="margin:2px 2px" ng-click="submitAppt()">提交</ons-button>
        </ons-list-item>
      </ons-list>
    </ons-dialog>
  </ons-template>

  <ons-template id="appt_confirm.html">
    <ons-dialog ng-controller="ApptConfirmController" cancelable>
      <ons-toolbar inline>
        <div class="center">
          信息确认
        </div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item>
          联系人: {{ visitor_name }}
        </ons-list-item>
        <ons-list-item>
          手机号: {{ visitor_phone }}
        </ons-list-item>
        <ons-list-item>
          车牌号: {{ license_plate }}
        </ons-list-item>
        <ons-list-item>
          预约时间: {{ scheduled_time }}
        </ons-list-item>
        <ons-list-item>
          预计完成: {{ estimated_complete_time }}
        </ons-list-item>
        <ons-list-item>
          <ons-button modifier="large" style="margin:2px 2px" ng-click="submitAppt()">确认并提交预约</ons-button>
        </ons-list-item>
      </ons-list>
    </ons-dialog>
  </ons-template>

  
  

  <script src="/static/weixin/js/lib/mobilscroll.zh.js"></script>

  <script src="/static/weixin/js/schedular.js"></script>
  
  
  <script>
    ons.ready(function() {
    });
  </script> 
</body>
</html>